<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ</title>
    <!-- <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/bootstrap.js"></script> -->
    <script src="./js/jquery-3.6.0.js"></script>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        /* body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: rgb(168, 168, 168);
        }
        
        img {
            width: 50%;
            height: 50%;
            margin-bottom: 50px;
        } */
        /* .dbc {
            background-color: pink;
            width: 200px;
            height: 200px;
        } */
        /* .CL {
            width: 200px;
            height: 200px;
            background-color: red;
        } */
        /* .totop {
            position: fixed;
            background-color: cyan;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            left: 90%;
            top: 70%;
            transform: translateX(-90%);
            z-index: 99;
            display: none;
        }
        
        .container {
            position: relative;
            margin: 0 auto;
            width: 80%;
            height: 2000px;
            background-color: pink;
            top: 500px;
        } */
        /* .f {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 30px;
            background-color: pink;
        }
        
        .s {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: purple;
            left: 30px;
            top: 30px;
        } */
        /* .down {
            font-size: 12px;
            padding: 0 20px 0 20px
        }
        
        .bga {
            background-color: red;
        } */
        /* button {
            transition: all 0.4s;
        }
        
        .k {
            background-color: red;
            transform: rotate(360deg);
        } */
        /* .box {
            display: flex;
            height: 200px;
        }
        
        .left {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }
        
        .left li {
            border: 2px solid pink;
            cursor: pointer;
        }
        
        .right li {
            position: absolute;
        } */
        /* .banner {
            width: 900px;
            background-color: rgb(243, 243, 243);
            height: 300px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
        
        ul {
            display: flex;
            border: 1px solid #CCC;
            height: 30px;
        }
        
        ul li {
            padding: 0 10px 0 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .kl {
            background-color: red;
            color: white;
        }
        
        .tab_con div {
            position: absolute;
        } */
        /* div {
            background-color: pink;
            width: 300px;
            height: 300px;
            border: 10px solid red;
            margin: 10px;
            padding: 20px;
        } */
        /* body {
            background-color: black;
        }
        
        div {
            border: 1px white solid;
            width: 500px;
            height: 300px;
            margin: 0 auto;
        }
        
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        
        ul li {
            margin: 20px;
        } */
        /* .box {
            position: absolute;
            width: 1000px;
            border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            top: 300px;
            left: 300px;
        }
        
        textarea {
            width: 500px;
            height: 60px;
        } */
    </style>
</head>

<body>
    <!-- <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                    <a class="navbar-brand" href="#">Project name</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
                        <li><a href="../navbar-static-top/">Static top</a></li>
                        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div> -->
    <!-- /container -->
    <!-- <div class="totop"></div>
    <div class="container"></div> -->
    <!-- <div class="parent">
        <div class="nav">
            <p>太厉害了</p>
        </div>
    </div>
    <ol>
        <li>ol下的list</li>
        <li>ol下的list</li>
        <li>ol下的list</li>
        <li>ol下的list</li>
        <li>ol下的list</li>
        <li>ol下的list</li>
    </ol>
    <ul>
        <li>ul下的list</li>
        <li>ul下的list</li>
        <li>ul下的list</li>
        <li>ul下的list</li>
        <li>ul下的list</li>
        <li>ul下的list</li>
        <div>
            <li>ul下的div的list</li>
            <li>ul下的div的list</li>
            <li>ul下的div的list</li>
        </div>
    </ul> -->
    <!-- <div id="nav">
        <ul>微博
            <li>123</li>
            <li class="456">456</li>
            <li>789</li>
        </ul>
        <ul>微博
            <li>123</li>
            <li class="456">456</li>
            <li>789</li>
        </ul>
        <ul>微博
            <li>123</li>
            <li class="456">456</li>
            <li>789</li>
        </ul>
        <ul>微博
            <li>123</li>
            <li class="456">456</li>
            <li>789</li>
        </ul>
    </div> -->
    <!-- <div class="currient">
        <p>111111111</p>
        <p>222222222</p>
        <p>333333333</p>
        <p>444444444</p>
    </div> -->
    <!-- <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button> -->
    <!-- <div class="box">
        <ul class="left">
            <li>凌华</li>
            <li>霄宫</li>
            <li>凌华</li>
            <li>霄宫</li>
            <li>凌华</li>
        </ul>
        <ul class="right">
            <li><img src="./img/lh.jpg" alt="丢失" width="200" height="200"></li>
            <li><img src="./img/xg.jpg" alt="丢失" width="200" height="200"></li>
            <li><img src="./img/lh.jpg" alt="丢失" width="200" height="200"></li>
            <li><img src="./img/xg.jpg" alt="丢失" width="200" height="200"></li>
            <li><img src="./img/lh.jpg" alt="丢失" width="200" height="200"></li>
        </ul>
    </div> -->
    <!-- <div class="banner">
        <ul>
            <li class="kl">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价</li>
            <li>手机社区</li>
        </ul>
        <div class="tab_con">
            <div>商品介绍</div>
            <div>规格与包装</div>
            <div>售后保障</div>
            <div>商品评价</div>
            <div>手机社区</div>
        </div>
    </div> -->
    <!-- <button>显示</button><button>隐藏</button><button>切换</button>
    <div></div> -->
    <!-- <div>
        <ul>
            <li><img src="./img/lh.jpg" alt="null" width="100" height="100"></li>
            <li><img src="./img/xg.jpg" alt="null" width="100" height="100"></li>
            <li><img src="./img/lh.jpg" alt="null" width="100" height="100"></li>
            <li><img src="./img/lh.jpg" alt="null" width="100" height="100"></li>
            <li><img src="./img/xg.jpg" alt="null" width="100" height="100"></li>
            <li><img src="./img/lh.jpg" alt="null" width="100" height="100"></li>
        </ul>
    </div> -->
    <!-- <div></div> -->
    <!-- <a href="www.baidu.com">baidu</a>
    <input type="checkbox" name="" id="">
    <div class="ix" index=200></div>
    <span></span> -->
    <!-- <div class="i-top">
        <span class="j-one"><input type="checkbox" class="j-ck"></span><span></span><span>单价</span><span>数量</span><span>小计</span><span>操作</span>
    </div>
    <div class="i-center">
        <div class="j-big">
            <div class="k-list">
                <span><input type="checkbox" class="j-bk"></span><span class="l-width"></span><span class="char">￥9.90</span><button class="de">-</button><input type="text" class="sumI"><button class="in">+</button><span class="t-char">￥9.90</span><span><a href="javascript:;" class="del">删除</a></span>
            </div>
            <div class="k-list">
                <span><input type="checkbox" class="j-bk"></span><span class="l-width"></span><span class="char">￥9.90</span><button class="de">-</button><input type="text" class="sumI"><button class="in">+</button><span class="t-char">￥9.90</span><span><a href="javascript:;"  class="del">删除</a></span>
            </div>
            <div class="k-list">
                <span><input type="checkbox" class="j-bk"></span><span class="l-width"></span><span class="char">￥9.90</span><button class="de">-</button><input type="text" class="sumI"><button class="in">+</button><span class="t-char">￥9.90</span><span><a href="javascript:;"  class="del">删除</a></span>
            </div>
        </div>
    </div>
    <div class="i-bottom">
        <span class="j-one"><input type="checkbox" class="j-ck"></span><span>删除选中商品</span><span><a href="javascript:;"  class="delAll">清理购物车</a></span><span>已选择 0 件商品</span><span>总价: ￥ 0.00</span><span>去结算</span>
    </div> -->
    <!-- <div>
        <span></span>
    </div>
    <input type="text" name="" id=""> -->
    <!-- <span class="char">￥9.90</span><button class="de">-</button><input type="text"><button class="in">+</button><span class="t-char">￥9.90</span> -->
    <!-- <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">太棒了弟弟</div>
            </div>
        </div>
    </div> -->
    <!-- <div>1</div>
    <div>2</div>
    <div>3</div> -->
    <!-- <ul>
        <li>我好</li>
    </ul>
    <div class="dem">原先div</div> -->
    <!-- <div class="f">
        <div class="s"></div>
    </div> -->
    <!-- <div class="CL"></div> -->
    <!-- <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul> -->
    <!-- <div class="box">
        <span>微博发布</span>
        <textarea name="" class="txt" id="" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div> -->
    <!-- <div class="dbc"></div> -->
    <!-- <p>Type 'correct' to validate.</p>
    <form action="javascript:alert( 'success!' );">
        <div>
            <input type="text">
            <input type="submit">
        </div>
    </form>
    <span></span> -->
    <!-- <div></div> -->
    <!-- <img data-lazy-src="./img/2022teriri.png" alt="">
    <img data-lazy-src="./img/格蕾修.jpg" alt="">
    <img data-lazy-src="./img/来自多彩世界的明天.png" alt="">
    <img data-lazy-src="./img/2022teriri.png" alt="">
    <img data-lazy-src="./img/格蕾修.jpg" alt="">
    <img data-lazy-src="./img/来自多彩世界的明天.png" alt="">
    <img data-lazy-src="./img/2022teriri.png" alt="">
    <img data-lazy-src="./img/格蕾修.jpg" alt="">
    <img data-lazy-src="./img/来自多彩世界的明天.png" alt="">
    <img data-lazy-src="./img/2022teriri.png" alt="">
    <img data-lazy-src="./img/格蕾修.jpg" alt="">
    <img data-lazy-src="./img/来自多彩世界的明天.png" alt=""> -->
    <script>
        $(() => {
            let dataGet = {
                id: 3,
                title: 'Hello Cyan'
            }
            let url = 'http://*/'
            $.get(url, dataGet, (res) => {
                console.log(res);
            }, "json");
            /* // 懒加载
            lazyLoadInit({
                    coverColor: "white",
                    coverDiv: "<h1>Hello</h1>",
                    showTime: 1100,
                    onLoadBackEnd: function(index, dom) {
                        console.log("onLoadBackEnd" + index)
                    },
                    onLoadBackStart: function(index, dom) {
                        console.log("onLoadBackStart" + index)
                    }
                }) */
            /* // JQuery冲突
            var 随便 = $.noConflict()
            let mm = 随便(document)
            console.log(mm); */
            /* // 对象拷贝
            let 一个对象 = {}
            let 三个对象 = {
                id: 2
            }
            let 两个对象 = {
                id: 1,
                name: '你好',
                随便来个: {
                    age: 20
                }
            }

            $.extend(一个对象, 两个对象) //浅拷贝 复杂数据类型只拷贝地址，会造成一定影响
            console.log(一个对象, 两个对象);
            $.extend(true, 三个对象, 两个对象) //深拷贝 复制复杂数据类型
            console.log(一个对象, 两个对象, 三个对象); */
            /* $('div').on('click', function(event) {
                alert('hello')
                event.stopPropagation(); //阻止冒泡
            }).css({
                'width': '600px',
                'height': '600px',
                'background': 'pink'
            })
            $(document).on('click', function(event) {
                    alert('helloss')
                }) */
            /* $('form').submit((e) => {
                    if ($("input:eq(0)").val() === 'correct') {
                        $('span').text('vall').show()
                        return
                    }
                    $('span').text('no').show().fadeOut(1000)
                    e.preventDefault()
                }) */
            /* $('.dbc').dblclick(() => {
                    alert('b')
                }) */
            /* $('.btn').on({
                click: function() {
                    let li = $('<li></li>')
                    li.html($('.txt').val() + '<a href="javascript:;">删除</a>')
                    li.slideDown()
                    $('ul').prepend(li)
                    $('.txt').val('')
                }
            })
            $('ul').on('click', 'a', function() {
                    $(this).parent().slideUp(function() {
                        $(this).remove()
                    })
                }) */
            /* $('ul').on('click', 'li', function() {
                    console.log('liiiiii');
                }) */
            /* $('.CL').on({
                click: function() {
                    $(this).css('background-color', 'blue')
                },
                mouseenter: function() {
                    $(this).css('background-color', 'cyan')
                },
                mouseout: function() {
                    $(this).css('background-color', '#CCC')
                }
            });
            $('.CL').on("mouseout mouseenter", function() {
                console.log('hello');
            }); */
            /* let btop = $('.container').offset().top
            $(window).scroll(function() {
                if ($(document).scrollTop() >= btop) {
                    $('.totop').fadeIn()
                } else {
                    $('.totop').fadeOut()
                }
            });
            $('.totop').click(function() {
                    $('body,html').stop().animate({
                        scrollTop: 0
                    })
                }) */
            /* console.log($('.s').offset());
            $('.s').offset({
                top: 100,
                left: 100
            })
            console.log($('.s').offset());
            console.log($('.s').position()); //返回父级定位 */
            /* let 宽 = $('div').width()
            let inner宽 = $('div').innerWidth()
            let outer宽 = $('div').outerWidth()
            let all宽 = $('div').outerWidth(true)
            let 高 = $('div').height()
            let inner高 = $('div').innerHeight()
            let outer高 = $('div').outerHeight()
            let all高 = $('div').outerHeight(true)
            console.log(宽, 高);
            console.log(inner宽, inner高); //包含padding
            console.log(outer宽, outer高); //包含padding border
            console.log(all宽, all高); //包含padding border margin */
            /* let nihao = $('<li>你好</li>') //创建元素
            let wohao = $('<li>大家好</li>') //创建元素
                // 内部添加
            $('ul').append(nihao) //在最后添加元素
            $('ul').prepend(wohao) //在最前面添加元素
                // 外部添加
            let div = $('<div>外部添加</div>')
            $('.dem').after(div)
            $('.dem').before(div)
                // 删除元素
                // $('ul').remove() //全部删除包括自己
                // $('ul').empty()//清除内部元素$('ul').html('')一样 */
            // 遍历对象
            /* $.each({
                    name: 'cyan',
                    age: '18'
                }, function(i, ele) {
                    console.log(i);
                    console.log(ele);
                }) */
            /* 
            //遍历dom
            let arr = ['red', 'blue', 'yellow']
            let sum = 0
            $('div').each(function(i, dom) {
                console.log(i)
                console.log(dom)
                $(dom).css('color', arr[i])
                sum += Number($(dom).text())
            });
            console.log(sum); */
            /* console.log($('.four').parent().parent().parent());
            console.log($('.four').parents('.one')); */
            /* $('input').css({
                width: 30,
                'text-align': 'center'
            }).val(1);
            $('button').css({
                width: 20,
                height: 20
            })
            $('.in').click(function() {
                let i = Number($(this).siblings('.char').text().substr(1))
                let j = Number($(this).siblings('input').val())
                j++
                $(this).siblings('input').val(j)
                $(this).siblings('.t-char').text('￥' + (i * j).toFixed(2))
                总计()
            })
            $('.de').click(function() {
                let i = Number($(this).siblings('.char').text().substr(1))
                let j = Number($(this).siblings('input').val())
                j == 0 ? j == 0 : j--;
                $(this).siblings('input').val(j)
                $(this).siblings('.t-char').text('￥' + (i * j).toFixed(2))
                总计()
            })
            $('input').change(function() {
                let i = Number($(this).val())
                let j = Number($(this).siblings('.char').text().substr(1))
                $(this).siblings('.t-char').text('￥' + (i * j).toFixed(2))
                总计()
            });
            $('.del').click(function() {
                $(this).parent().parent().remove()
            })
            $('.delAll').click(function() {
                    $('.i-center').remove()
                }) */
            /* $('div').html('hi')
            $('div').text('hia')
            console.log($('div').html());
            console.log($('div').text());
            $('input').val('123456')
            console.log($('input').val()); */
            /* $('.i-top').css({
                'background': '#CCC',
                'border-bottom': '1px solid white',
                width: 700
            })
            $('.i-bottom').css({
                'background': '#CCC',
                'border-bottom': '1px solid white',
                width: 700
            })
            $('.i-bottom span').addClass('down')
            $('.i-bottom span:last').css({
                'background-color': 'red'
            })
            $('.i-top span').addClass('down')
            $('.i-top span:eq(1)').css({
                'padding-right': '300px'
            })
            $('.i-center').css({
                width: 700,
                'background-color': '#CCC',
            })
            $('.k-list').css({
                'padding': '30px 0 30px 0'
            })
            $('.k-list span').addClass('down')
            $('.l-width').css({
                'padding-right': '300px'
            })
            $('.j-ck').change(function() {
                $('.j-bk').prop('checked', $(this).prop('checked'))
                $('.j-ck').prop('checked', $(this).prop('checked'))
                $('.j-bk:checked').length === $('.k-list').length ? $('.k-list').addClass('bga') : $('.k-list').removeClass('bga')
                总计()
            })
            $('.j-bk').change(function() {
                $(this).parents('.k-list').toggleClass('bga')
                $('.j-bk:checked').length === $('.k-list').length ? $('.j-ck').prop('checked', true) : $('.j-ck').prop('checked', false)
                总计()
            });

            function 总计() {
                let count = 0
                let sum = 0
                $('.sumI').each(function(i, j) {
                    count += Number($(j).val())
                })
                $('.t-char').each(function(i, j) {
                    sum += Number($(j).text().substr(1))
                })
                $('.i-bottom span').eq(3).text(`已选择 ${count} 件商品`)
                $('.i-bottom span').eq(4).text(`总价: ￥ ${sum.toFixed(2)}`)
            } */
            /* onsole.log($('a').prop('href'))
                        $('a').prop('title', '真厉害')
                        $('input').change(function() {
                            console.log($(this).prop('checked'))
                        });
                        // 自定义属性 attr 类似于set/getAttrbuite 
                        console.log($('div').attr('index'))
                        $('div').attr('index', 5)
                        console.log($('div').attr('index'));
                        $('span').data('uname', '123')
                        console.log($('span').data('uname')); */
            /* $('div').css({
                'position': 'absolute',
                'width': '100px',
                'height': '100px',
                'background-color': 'cyan'
            })
            $('div').click(function() {
                $(this).animate({
                    'left': '300px',
                    'top': '100px',
                    'width': '200px',
                    'opacity': '0.2'
                })
            }); */
            /* $('ul li').hover(function() {
                    $(this).siblings().stop().fadeTo(400, 0.3)
                }, function() {
                    $(this).siblings().stop().fadeTo(400, 1)
                }) */
            /* $('div').hover(function() {
                // stop()停止排队
                $(this).stop().fadeToggle()
            }); */
            /* //2个函数
            $('div').hover(function() {
                $(this).fadeIn(1000)
            }, function() {
                $(this).fadeOut(1000)
            })
            //1个函数
            $('div').hover(function() {
                $(this).fadeToggle(1000)
            }); */
            /* $('button').eq(1).click(function() {
                // $('div').hide('fast')
                $('div').slideUp()
            })
            $('button').eq(0).click(function() {
                // $('div').show('fast')
                $('div').slideDown()
            })
            $('button').eq(2).click(function() {
                $('div').slideToggle()
            }); */
            /* $('.tab_con div:first').show().siblings().hide()
            $('li').click(function() {
                $(this).addClass('kl').siblings().removeClass('kl');
                $('.tab_con div').eq($(this).index()).show().siblings().hide();
            }); */
            /* $('button').click(function() {
                $(this).toggleClass('k');
                // $(this).addClass('k').siblings().removeClass('k')
            }); */
            // 排他思想  
            /* $('button').click(function() {
                // 链式编程
                $(this).css('background-color', 'pink').siblings().css('background-color', '');
                $(this).css('background-color', 'pink').siblings().css('background-color', '');
                //返回样式
                console.log($(this).css('width'));
                // 对象形式
                $(this).css({
                    'background-color': 'pink',
                    'width': '60px',
                    'height': '60px'
                })
            }); */
            /* $('.left li').mouseover(function() {
                let index = $(this).index()
                $('.right li').eq(index).show()
                $('.right li').eq(index).siblings().hide()
            }) */
            /* $(() => {
                console.log($('.nav'))
                console.log($('ul li').text())
                console.log($('ul>li').text())
                $('ul>li').css('color', 'pink')
                $('ol li:first').css('color', 'red');
                $('ol li:last').css('color', 'red');
                $('ol li:eq(2)').css('color', 'red');
                $('ol li:odd').css('color', 'blue');
                $('ol li:even').css('color', 'red');
                //父类的直接子类的子类p
                $('.nav').parent().children().find('p').css('color', 'green')
            }); */
            // 下拉菜单
            /* $(() => {
                $('#nav').css('display', 'flex')
                $('li').hide();
                // siblings除自己之外同父级的所有兄弟
                $('.456').siblings().css({
                    'color': 'red',
                    'border': '3px solid red'
                });
                // $('li').siblings('.456').css('color', 'black')
                $('#nav>ul').mouseover(function() {
                    $(this).children('li').show()
                })
                $('#nav>ul').mouseout(function() {
                    $(this).children('li').hide()
                })
            }) */
            /* $(() => {
                // 选择元素
                //parent()  children('')    find('')   sibling('')   nextAll()  prevtAll()  hasClass('')    eq(variable)
                let index = 2
                let index1 = 0
                $(`.currient p:eq(${index1})`).css('color', 'red')
                $('.currient p').eq(index).css('color', 'red')
                console.log($('.currient li:eq(3)').hasClass('like'))
                console.log($('.currient').hasClass('currient'));
            }) */
        });
    </script>
</body>

</html>